<script setup lang="ts">
import { useRouter } from 'vue-router';
import { userLogoutService,getUserInfoService } from '@/api/user';
import { ref } from 'vue';
import useUserInfoStore from "@/stores/userInfo.js";
import {useTokenStore} from "@/stores/token.js"
const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()
const user =ref({})
const router = useRouter();
//调用函数，获取用户详细信息
const getUserInfo = async () => {
  const result = await getUserInfoService();
  console.log(result.data);
  userInfoStore.setUserInfo(result.data)
  user.value = {...userInfoStore.userInfo }
  console.log(userInfoStore.userInfo);
}

getUserInfo()
const logout = async()=>{
  let result = await userLogoutService();
  tokenStore.removeToken()
     router.push('/login')
 }
</script>


<template>
    <div class="app-container">
        <van-cell title="用户昵称" :value="user.userName"/>
        <van-cell title="用户头像" :style="{display:'flex',alignItems:'center',height:'80px'}">
            <template #value>
                <van-image
                        style="margin-top: 5px"
                        v-if="user.avatarUrl"
                        width="70"
                        height="70"
                        :src="user.avatarUrl"
                />
            </template>
        </van-cell>
        <van-cell title="用户账号" :value="user.userAccount"/>
        <van-cell title="用户性别">
            <template #value>
                <van-tag v-if="user.gender===1" type="primary" color="primary">男</van-tag>
                <van-tag v-if="user.gender===0" type="primary" color="red">女</van-tag>
            </template>
        </van-cell>
        <van-cell title="手机号码" :value="user.phone"/>
        <van-cell title="电子邮箱" :value="user.email"/>
        <van-cell title="注册时间" :value="user.createTime"/>

        <div style="margin: 16px;">
            <van-button type="primary" round block
                        style="margin-bottom: 10px"
                        @click="router.push('/user/edit')"
            >
                修改资料
            </van-button>
            <van-button type="danger" round block @click="logout">退出登录</van-button>
        </div>
    </div>
</template>
<style scoped>


</style>
